<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        // 部门id自增
        let deptId = Date.now();
        /*全选行*/
        function checkTreeAllRow(event){
            let checkedStatus = event.checked
            let checkBoxInput = $(event).parents("thead").next("tbody").children('tr').children('td').children("input[type='checkbox']")
            checkBoxInput.each(function () {
                $(this).prop('checked', checkedStatus)
            })
        }
        /*单选行*/
        function checkTreeRow(event,currentRange){
            let checkedStatus = event.checked
            let trs = $(event).parents("tbody").children('tr');
            let currentIndex = $(event).parents("tr")[0].rowIndex;
            // console.log(currentIndex)
            // let ranges = trs.children("td[title ='range']");
            // console.log(ranges)
            if (checkedStatus == false){
                $('#check_tree_all_row').prop('checked', false)
                // 取消父项子项全部取消
                trs.each(function () {
                    let range = $(this).children("td[title ='range']")[0].innerHTML
                    if ($(this)[0].rowIndex > currentIndex ) {
                        if (range > currentRange) {
                            let childCheck = $(this).children('td').children("input[type='checkbox']");
                            childCheck.prop('checked',false)
                        }
                    }
                })
            } else {
                // 选择父项子项全部选择
                trs.each(function () {
                    let range = $(this).children("td[title ='range']")[0].innerHTML
                    if ($(this)[0].rowIndex > currentIndex ) {
                        if (range > currentRange) {
                            let childCheck = $(this).children('td').children("input[type='checkbox']");
                            childCheck.prop('checked',true)
                        } else {
                            return false;
                        }
                    }
                })
                // 找到所有的checkbox
                let checkBoxInput = trs.children('td').children("input[type='checkbox']")
                let checkStatus = true
                // 如果有一个单选框为false，全选为false
                checkBoxInput.each(function () {
                    let cruuCheckStatus = $(this)[0].checked
                    if (!cruuCheckStatus){
                        checkStatus = cruuCheckStatus
                    }
                })
                if (checkStatus){
                    $('#check_tree_all_row').prop('checked', true)
                } else {
                    $('#check_tree_all_row').prop('checked', false)
                }
            }
        }

        /*添加 组织架构*/
        function addTreeTableRow(){
            $('.del_tree_row').show()
            $('#treeTableFieldset').show()
            var table_data = document.getElementById("tree_table_data");
            var tBodies = table_data.tBodies;
            var tbody = tBodies[0];
            let rows = tbody.rows.length
            // 向tbody的插入下一行
            var tr = tbody.insertRow(rows);

            var tmp = ++ deptId
            var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
            for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
                var td = tr.insertCell(i);
                td.align='center'
                if (i == 0){
                    // 每行的第一列插入单选框
                    td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkTreeRow(this,1)"/>';
                } else if (i == 1) {
                    td.title = "id";
                    td.innerHTML = tmp;
                    td.style = "display: none";
                    // 第三行插入层级
                } else if (i == 2) {
                    td.title = "range";
                    td.innerHTML = 1;
                    td.style = "display: none";
                    // 第四行插入父级部门，顶级部门的id默认为0
                } else if (i == 3) {
                    td.title = "parentId";
                    td.innerHTML = 0;
                    td.style = "display: none";
                }
                else if(i == tds.length-1) {
                    td.innerHTML = '<button type="button" id="btn2" class="btn btn-white btn-sm add_child" onclick="addTreeChildRow(this,' + tmp + ',1)"><i class="fa fa-plus"> 添加子部门</i></button>'
                    // + '<button type="button" id="btn3" class="btn btn-white btn-sm toogle" onclick="toogle()"><i class="fa fa-plus"> 展开/折叠</i></button>'
                }else if (i == 4){
                    td.innerHTML = "<div contenteditable aria-invalid='true' style='text-align: left'></div>";
                    td.style="text-align: left";
                } else {
                    td.innerHTML = "<div contenteditable></div>";
                }
            }
            // "checked"属性设置为false，也就是取消选中该复选框。
            $('#check_tree_all_row').prop('checked', false)

        }
        /*删除 表格模块 行*/
        function removeTreeTableRow() {
            let checkStatus = false
            var table = document.getElementById("tree_table_data");
            for (var i = table.rows.length - 1; i > 0; i--) {
                if (i == 0){
                    continue;
                }
                var chkOrder = table.rows[i].cells[0].firstChild;
                if (chkOrder && chkOrder.checked) {
                    checkStatus = true
                    //执行删除
                    table.deleteRow(i);
                    // 如果tbody的行数为0，隐藏所有的行与按钮
                    var tableDataRowLength = table.tBodies[0].rows.length;
                    if (tableDataRowLength == 0) {
                        $('.del_row').hide()
                        $('#tableFieldset').hide()
                        $(table).children('tbody').children().remove()
                        $(table).children('thead').children().remove()
                        resetTreeTable()
                    }
                }
            }
            if (!checkStatus) {
                $.modal.msgWarning("至少选择一条数据")
                return
            }
        }
        /*重置 表格*/
        function resetTreeTable(){
            var title =
                '<tr>'
                +'	<td bgcolor="#eff3f8" align="center" width="4%"><input type="checkbox" class="common_class" id="check_tree_all_row" onclick="checkTreeAllRow(this)"/></td>'
                +'  <td style="display: none">id</td>'
                +'  <td style="display: none">层级</td>'
                +'  <td style="display: none">parentId</td>'
                +'	<td bgcolor="#eff3f8" align="center"><div class="table_header" >部门</div></td>'
                +'	<td bgcolor="#eff3f8" align="center"><div class="table_header" >领导人</div></td>'
                +'  <td bgcolor="#eff3f8" align="center" width="20%"><div class="table_header" >操作</div></td>'
                +'</tr>'
            $('#tree_table_data').children('thead').append(title)
        }

        /*添加子部门*/
        function addTreeChildRow(event,parentId,range){
            let rowNumber = $(event).parents("tr")[0].rowIndex
            console.log("parentId:"+ parentId +";range:"+ range + ":rowNumber:" + rowNumber)
            ++range;
            var table_data = document.getElementById("tree_table_data");
            var tBodies = table_data.tBodies;
            var tbody = tBodies[0];
            var trs1 = tbody.getElementsByTagName("tr");
            var tr1 = trs1.item(rowNumber-1);
            var tds1 = tr1.getElementsByTagName("td");
            var divs = tds1.item(4).getElementsByTagName("div");
            var div  = divs.item(0)
            var content = div.innerHTML;
            if (content == null || content === ''|| content == undefined) {
                $.modal.msgWarning("请填写父级部门名称")
                return;
            }

            var tr = tbody.insertRow(rowNumber)
            var tmp = ++ deptId
            var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
            for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
                var td = tr.insertCell(i);
                td.align='center';
                if (i == 0){
                    // 每行的第一列插入单选框
                    td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkTreeRow(this,'+ range +')"/>';
                } else if (i == 1) {
                    td.title = "id";
                    td.innerHTML = tmp;
                    td.style = "display: none";
                    // 第三行插入层级
                } else if (i == 2) {
                    td.title = "range";
                    td.innerHTML = range;
                    td.style = "display: none";
                    // 第四行插入父级部门，顶级部门的id默认为0
                } else if (i == 3) {
                    td.title = "parentId";
                    td.innerHTML = parentId;
                    td.style = "display: none";
                }
                else if(i == tds.length-1) {
                    td.innerHTML = '<button type="button" id="btn2" class="btn btn-white btn-sm add_child" onclick="addTreeChildRow(this,' + tmp + ','+ range +')"><i class="fa fa-plus"> 添加子部门</i></button>'
                    // + '<button type="button" id="btn3" class="btn btn-white btn-sm toogle" onclick="toogle()"><i class="fa fa-plus"> 展开/折叠</i></button>'
                }else if (i == 4){
                    var html = "";
                    for (let j = 0; j < range-1; j++) {
                        html = html + "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>"
                    }
                    html = html + "<div contentEditable aria-invalid='true' style='text-align: left; display: inline-block'></div>";
                    td.innerHTML = html;
                    td.style="text-align: left";
                } else {
                    td.innerHTML = "<div contenteditable></div>";
                }
            }
            // "checked"属性设置为false，也就是取消选中该复选框。
            $('#check_tree_all_row').prop('checked', false)

        }
    </script>
</head>

<body>
    <div class="row">
        <div class="col-sm-12 custem_table">
            <input id="orgStructure" name="org_structure" type="hidden"/>
            <button type="button" id="btn1" class="btn btn-white btn-sm add_row" onclick="addTreeTableRow()"><i class="fa fa-plus"> 增加行</i></button>
            <button type="button" class="btn btn-white btn-sm del_tree_row" onclick="removeTreeTableRow(this)" style="display:none"><i class="fa fa-minus"> 删除行</i></button>
            <fieldset class="fieldset" id="treeTableFieldset" style="display:none">
                <table class="table_data" id="tree_table_data" bordercolor="#e5e6e7" border="1" cellpadding="2" width="100%">
                    <thead>
                    <tr>
                        <td bgcolor="#eff3f8" align="center" name="Num" width="4%"><input type="checkbox" class="common_class" id="check_tree_all_row" onclick="checkTreeAllRow(this)"/></td>
                        <td style="display: none">id</td>
                        <td style="display: none">层级</td>
                        <td style="display: none">parentId</td>
                        <td bgcolor="#eff3f8" align="center"><div class="table_header" >部门</div></td>
                        <td bgcolor="#eff3f8" align="center"><div class="table_header" >领导人</div></td>
                        <td bgcolor="#eff3f8" align="center" width="20%"><div class="table_header" >操作</div></td>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </fieldset>
        </div>
    </div>


</body>
</html>

<!--<span class="treetable-indent"></span><span class="treetable-expander glyphicon glyphicon-chevron-down"></span>-->